<template>
  <div class="page">
    <m-header :title="langText&&langText.mycp" :canback="Boolean(1)"></m-header>
    <div class="body">
        <div class="sm_top">
        <p>{{langText&&langText.tctotalmoney}}： {{total_money}} {{langText&&langText.usdt}}</p>
        <p>{{langText&&langText.totalrevenue}}： {{money}} {{langText&&langText.fc}}</p>
        </div>

        <div class="sm_bot">
            <div class="sm_bot_top">
                <span>{{langText&&langText.all}}</span>
                
              <div class="span_right_icon" @click="choicePay">
                    <p>
                    <i class="iconfont iconshang mark" ></i>
                  </p>
                  <p>
                    <i class="iconfont iconxia mark" ></i>
                  </p>
              </div>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="$router.push({name:'MealDetails',query:{id:item.id}})">
                    <div>
                        <span>{{item.name_cn}}</span>
                        <span>{{item.status==0?langText&&langText.income:langText&&langText.expired}}</span>
                    </div>
                    <div>
                        <p>{{langText&&langText.depositamount}}：{{item.price}} {{langText&&langText.usdt}}</p>
                        <p>{{langText&&langText.startingtime}}：{{formDate(item.createtime)}}</p>
                        <p>{{langText&&langText.residualincomedays}}：{{item.days_d}}{{langText&&langText.day}}</p>
                        <p>{{langText&&langText.earnedgains}}：{{item.money}} {{langText&&langText.fc}}</p>
                    </div>
                </li>
            </ul>
        </div>

        
        <!-- <button class="btn-submit btn-origin bot-btn" @click="$router.push({name:'UpLevel'})">升级</button> -->
    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner,Trade } from "@/server/server.js";
import { Load,Util } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { Hashrate,MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      allTxt:null,
      payPicker:new mui.PopPicker(),
      total_money:null,
      money:null,
      list:[],
      payType:'USDT',
      langText:null,
      payList:[
        {
          value: 'all',
          text: '全部'
        },
        {
          value: '0',
          text: '收益中'
        },
        {
          value: '1',
          text: '已过期'
        },
      ],

    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.mysellList('all');
    this.initData();
    this.payPicker.setData(this.payList);
  },
  methods: {
    initData(){
      this.allTxt = Object.assign({},Hashrate,MyTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))

        this.payList[0].text = this.langText&&this.langText.all;
        this.payList[1].text = this.langText&&this.langText.income;
        this.payList[2].text = this.langText&&this.langText.expired;
    },
    formDate(time){
      return Util.formatDate(time).substring(0,10);
    },
    mysellList(status){
      Trade.mysellList({page:1,status:status}).then(res=>{
        if(res.code==1){
          this.money = res.data.money;
          this.total_money = res.data.total_money;
          this.list = res.data.data;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    choicePay(){
      let _This = this;
      this.isDown = false;
      this.payPicker.show(function(items) {
        console.log(_This.payType,items[0].value)
        _This.mysellList(items[0].value)
      })
    }
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .sm_top{
    width: 100%;
    height: 250px;
    background-color: #4EB6AD;
    padding: 40px 30px;
    position: relative;
    z-index: -99;
    p{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-top: 20px;
      &:first-child{ margin-top: 0 }
    }
    .right{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      border: 1px solid #fff;
      border-radius:10px;
      padding: 5px 15px;
      position: absolute;
      right: 60px;
      top: 60px;
    }
  }
  .sm_bot{
      width: 710px;
      margin-left: 20px;
    //   background-color: #fff;
      border-radius: 10px;
    //   padding: 0 30px;
      margin-top: -52px;
      z-index: 99;
      margin-bottom: 30px;
      position: relative;
      .span_right_icon{
        display: inline-block;
        position: absolute;
        right: 30px;
        top: -12px;
        p{ 
          color: #AAAAAA;
          height: 14px;
          &:last-child{
            margin-top: 4px;
          }
          }
        i{
          font-size: 24px;
          line-height: 0;
        }
      }
      .sm_bot_top{
          height: 88px;
          line-height: 88px;
          display: flex;
          justify-content: space-between;
        //   border-bottom: 1px solid #DDDDDD;
          background-color: #fff;
          padding: 0 30px;
          border-radius: 10px 10px 0 0;
          >span{
                font-size:32px;
                color:rgba(78,182,173,1);
          }
          i{
              font-size: 28px;
              color: #999999;
          }
      }
      ul{
          li{
                background-color: #fff;
                padding: 0 30px;
                margin-top: 20px;
                border-radius: 10px;
                &:first-child{ 
                    margin-top: 0;
                    border-top: 1px solid rgba(221, 221, 221, 0.4); 
                    border-radius: 0 0 10px 10px;
                }
              div{
                  &:first-child{
                      display: flex;
                      justify-content: space-between;
                      border-bottom: 1px solid rgba(221, 221, 221, 0.7);
                      height: 72px;
                      line-height: 72px;
                      span{
                          &:first-child{
                                font-size:28px;
                                font-weight:550;
                                color:rgba(51,51,51,1);
                          }
                          &:last-child{
                                font-size:28px;
                                color:rgba(78,182,173,1)
                          }
                      }
                  }
                  &:last-child{
                      padding: 15px 0;
                      p{
                            font-size:28px;
                            color:rgba(102,102,102,1);
                            margin-top: 5px;
                      }
                  }
              }
          }
      }
  }
  
  .bot-btn{
    width: 710px;
    margin-left: 20px;
    height: 88px;
    line-height: 88px;
    margin-bottom: 30px;
    border-radius: 10px;
    background-color: #4EB6AD;

    color: #fff;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>